<template>
	<view class="shop-cart" :class="themeName">
		<!-- #ifndef  H5 -->
		<u-navbar :is-back="false" :border-bottom="false">
			<slot>
				<image src="https://cdn.zkjialan.com/img1/logo.png" class="logo"></image>
			</slot>
		</u-navbar>
		<!-- #endif -->
		<view class="main">
			<!-- 有效商品 -->
			<block v-if="isLogin && activeLists.length != 0">
				<view class="cart-header">
					<span> 共{{ activeLists.length }}件商品 </span>
					<span v-if="admin" @click="admin = !admin"> 管理 </span>
					<span v-else @click="admin = !admin"> 完成 </span>
				</view>
				<view class="goods-container">
					<block v-for="(item, index) in activeLists" :key="index">
						<u-swipe-action :index="index" :options="option" @open="handleactionOpen"
							@click="handleactionClick" :show="activeIndex == item.id">
							<!-- 商品卡片 -->
							<view class="cart-list goodsBox">
								<view class="cart-item bg-white flex">
									<!-- 商品头部 -->
									<view class="row-between flex select">
										<u-checkbox v-if="admin" label-size="28rpx" :active-color="themeColor"
											v-model="item.selected" @change="changeGoodsStatus(item.selected, item.id)"
											:label-disabled="false" shape="circle" :disabled="
                                                item.sku_is_delete == 1 || item.sku_stock_none == 1
                                            ">
										</u-checkbox>
										<u-checkbox v-else label-size="28rpx" :active-color="themeColor"
											v-model="item.adminCheck" :label-disabled="false" shape="circle"
											@change="adminGoodsStatus">
										</u-checkbox>
									</view>
									<!-- 商品的主内容 -->
									<router-link :to="`/pages/goods_detail/goods_detail?id=${item.goods_id}`"
										style="width: 100%">
										<view class="flex" :style="{ padding: '20rpx', width: '100%' }">
											<u-image width="180rpx" height="180rpx" border-radius="15rpx" :src="
                                                    item.goods_item.image
                                                        ? item.goods_item.image
                                                        : item.goods.min_cover
                                                " />
											<view class="m-l-20" style="flex: 1">
												<view class="line-2 nr goodsName">{{ item.goods.name }}</view>
												<block v-if="
                                                        item.sku_is_delete == 0 &&
                                                        item.sku_stock_none == 0
                                                    ">
													<view class="muted xs line-2 m-t-10">
														{{ item.goods_item.spec_value_str }}
													</view>
													<view class="row-between flex m-t-20">
														<view class="price flex primary">
															<price :content="
                                                                    item.goods_item.sell_price
                                                                " :color="themeColor" mainSize="36rpx"
																minorSize="28rpx"></price>
														</view>
														<view class="cartNum" @tap.stop="">
															<u-number-box :disabled="item.cart_status != 0"
																v-model="item.goods_num" :min="1" async-change
																positiveInteger @change="
                                                                    countChange($event, item.id)
                                                                " />
														</view>
													</view>
												</block>
												<block v-else>
													<view class="flex row-between" style="margin-top: 80rpx">
														<view> 请重新选择商品规格 </view>
														<!-- <router-link
                              :to="`/pages/goods_detail/goods_detail?id=${item.goods_id}&cart_id=${item.id}&reCheck=1`"
                            > -->
														<view class="change-sku" @tap.stop="
                                                                handlereCheck(
                                                                    item.goods_id,
                                                                    item.id
                                                                )
                                                            ">重选</view>
														<!-- </router-link> -->
													</view>
												</block>
											</view>
										</view>
									</router-link>
								</view>
							</view>
						</u-swipe-action>
					</block>
				</view>
			</block>
			<!-- 无效商品 -->
			<block v-if="isLogin && inactiveLists.length != 0">
				<view class="disable-header">
					<span>失效商品{{ inactiveLists.length }}件</span>
					<span style="color: #dd524d" @click="handleClearAll">清空失效商品</span>
				</view>
				<view class="goods-container">
					<block v-for="(item, index) in inactiveLists" :key="index">
						<u-swipe-action :index="index" :options="option" @open="handledisaactionOpen"
							@click="handledisactionClick" :show="activeIndex == item.id">
							<!-- 商品卡片 -->
							<view class="cart-list" style="width: 100%">
								<view class="cart-item bg-white flex" :class="{
                                        invalid:
                                            item.cart_status == 1 ||
                                            (item.goods.spec_type == 1 &&
                                                item.goods_item.stock == 0)
                                    }">
									<!-- 商品头部 -->
									<view class="row-between flex select">
										<u-checkbox v-if="admin" label-size="28rpx" :active-color="themeColor"
											v-model="item.selected" @change="changeGoodsStatus(item.selected, item.id)"
											:label-disabled="false" shape="circle" :disabled="
                                                item.cart_status == 1 ||
                                                (item.goods.spec_type == 1 &&
                                                    item.goods_item.stock == 0)
                                            ">
										</u-checkbox>
										<u-checkbox v-else label-size="28rpx" :active-color="themeColor"
											v-model="item.adminCheck" :label-disabled="false" shape="circle"
											@change="adminGoodsStatus"></u-checkbox>
									</view>
									<!-- 商品的主内容 -->
									<router-link :to="`/pages/goods_detail/goods_detail?id=${item.goods_id}`"
										style="width: 100%">
										<view class="flex" :style="{ padding: '20rpx', width: '100%' }">
											<view class="disable-tip">
												<u-image width="180rpx" height="180rpx" :src="item.goods.min_cover" />
												<span class="disable-text" v-if="
                                                        item.goods.spec_type == 1 &&
                                                        item.goods_item.stock == 0
                                                    ">库存不足</span>
												<span class="disable-text" v-else>商品下架</span>
											</view>
											<view class="m-l-20 disable-body" style="flex: 1">
												<view class="line-2 nr">{{ item.goods.name }}</view>
												<view class="row-between flex m-t-20">
													该商品已不能购买
												</view>
											</view>
										</view>
									</router-link>
								</view>
							</view>
						</u-swipe-action>
					</block>
				</view>
			</block>
			<!-- 购物车空状态 -->
			<view class="cart-null bg-white m-b-20" style="padding: 80rpx 0 50rpx"
				v-if="cartLists.length == 0">
				<image class="img-null" src="https://cdn.zkjialan.com/img1/empty/cart.png"></image>
				<view class="noGoods">你还没有任何产品哦~</view>
				<view class="btn" @click="$switchTab('/pages/category/category')">立即选购</view>
			</view>
			<!-- <view class="cart-null bg-white m-b-20" style="padding: 80rpx 0 50rpx"
				v-if="isLogin && cartLists.length == 0">
				<image class="img-null" src="https://cdn.zkjialan.com/img1/empty/cart.png"></image>
				<view class="noGoods">你还没有任何产品哦~</view>
				<view class="btn" @click="$switchTab('/pages/category/category')">立即选购</view>
			</view> -->
			<!-- 是否登录的空状态 -->
			<!-- <view v-if="!isLogin" class="login column-center" style="padding: 200rpx 0 50rpx">
				<image class="img-null" src="https://cdn.zkjialan.com/img1/empty/cart.png"></image>
				<view class="noGoods">登录后才能查看购物车哦</view>
				<navigator class="btn" url="/pages/login/login">
					<text>去登录</text>
				</navigator>
			</view> -->
		</view>

		<!-- 底部结算栏 -->
		<view class="footer flex bg-white">
			<!-- left -->
			<checkbox-group class="normal" v-if="admin">
				<u-checkbox label-size="28rpx" @change="changeAllSelect" id="checkAll" value="all"
					:active-color="themeColor" v-model="isSelectedAll" :label-disabled="false"
					:disabled="selectAllDisabled" shape="circle">
					<text class="normal">全选</text>
				</u-checkbox>
			</checkbox-group>
			<checkbox-group class="normal" v-else>
				<u-checkbox label-size="28rpx" @change="adminAllSelect" id="checkAll" value="all"
					v-model="adminCheckAll" :active-color="themeColor" :label-disabled="false"
					:disabled="selectAllDisabled" shape="circle">
					<text class="normal">全选</text>
				</u-checkbox>
			</checkbox-group>
			<!-- right -->
			<view class="all-price nr m-r-20 flex">
				<block v-if="admin">
					<view class="heji">合计：</view>
					<price :content="total_amount || 0" :color="themeColor" mainSize="36rpx" minorSize="28rpx"></price>
				</block>
				<block v-else>
					<view class="right-btn br60 white" :style="{
                            background:
                                cartLists.filter((item) => {
                                    return item.adminCheck == true
                                }).length == 0
                                    ? '#f08329'
                                    : '#f08329'
                        }" @click="handleAdminDel">删除</view>
				</block>
			</view>
			<block v-if="admin">
				<view class="right-btn br60 white" v-if="getResultBtn" @tap="goToConfirm">去结算</view>
				<view class="right-btn br60 lighter" style="background: #f2f2f2" v-else>去结算</view>
			</block>
		</view>

		<!-- 是否删除商品的弹窗 -->
		<u-modal v-model="delPopup" :showCancelButton="true" comfirm-text="狠心删除" :confirm-color="themeColor"
			:show-title="false" @confirm="goodsDelete">
			<view style="padding-top: 40rpx" class="flex row-center">
				<view style="margin: 50rpx 0">确认删除该商品吗？</view>
			</view>
		</u-modal>
		<!-- <tabbar /> -->

		<!-- 加载中 -->
		<u-mask :show="isChangeLoading" :mask-click-able="false"
			:custom-style="{ background: 'rgba(0, 0, 0, 0)' }"></u-mask>
		<view class="loading" v-if="isChangeLoading">
			<u-loading size="40" :color="themeColor"></u-loading>
			<view class="white m-t-20"> 加载中... </view>
		</view>
	</view>
</template>

<script>
	import {
		apiCartLists, //商品列表
		apiCartDel, //商品删除
		apiCartCountChange, //商品数量改变
		apiCartSelectChange, //选择商品
		apiCartNum, //购物车数量
		apiGetPage, //获取当前diy页面
		apiclearAll //清空失效商品
	} from '@/api/store'
	import {
		OrderTypeEnum
	} from '@/utils/enum'
	import {
		trottle
	} from '@/utils/tools'

	export default {
		name: 'ShopCart',

		data() {
			return {
				pagesData: [], //diy的组件
				total_amount: '', //合计｜｜总余额
				cartLists: [], //购物车数据
				cartListsId: [], //购物车数据的所有ID
				total_amount: '', //购物车合计金额
				delPopup: false, //是否弹出删除商品的弹窗
				cart_id: 0, //删除的购物车ID
				isSelectedAll: false, //是否全选
				isChangeLoading: false, //是否是操作请求中状态
				option: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}], //滑动组件配置
				activeIndex: -1, //滑动组件开启对应的index
				activeLists: [],
				inactiveLists: [],
				admin: true,
				adminCheckAll: false,
				goods_isCross: '' //购物车第一个商品是否是跨境商品
			}
		},

		methods: {

			//


			//重选按钮
			handlereCheck(goods_id, cart_id) {
				this.$Router.push({
					path: `/pages/goods_detail/goods_detail?id=${goods_id}&cart_id=${cart_id}&reCheck=1`
				})
			},

			// 获取购物车数据列表
			getCartList() {
				return apiCartLists().then((res) => {
					this.total_amount = res.total_amount
					res.lists.forEach((item, index) => {
						res.lists[index].selected = item.selected == 1 ? true : false
					})
					this.cartLists = res.lists
					this.baseSelect(res.lists)
					this.$store.dispatch('getCartNum')
					this.isChangeLoading = false
					return Promise.resolve()
				})
			},

			// 初始化商品的选中状态
			baseSelect(data) {
				this.cartListsId = []
				const res = data.filter((el) => {
					this.cartListsId.push(el.id)
					return el.selected == false
				})
				this.isSelectedAll = true
				this.goodsListActive.map((item) => {
					if (!item.selected) this.isSelectedAll = false
				})
			},

			// 商品数量的修改
			countChange({
				value
			}, id) {
				this.isChangeLoading = true
				apiCartCountChange({
						cart_id: id,
						goods_num: value
					})
					.then((res) => {
						this.$store.dispatch('getCartNum')
					})
					.finally(() => {
						this.getCartList()
					})
			},

			// 弹窗拿到当前需要删除的商品购物车ID
			changeDelPopup(cart_id) {
				this.delPopup = true
				this.cart_id = cart_id
			},

			// 删除购物车的商品
			async goodsDelete() {
				this.isChangeLoading = true
				await apiCartDel({
					cart_id: this.cart_id
				})
				await this.getCartList()
				this.$toast({
					title: '删除成功'
				})
			},

			// 单选
			changeGoodsStatus(status, id) {
				this.isChangeLoading = true
				status = status == 1 ? 0 : 1
				apiCartSelectChange({
					cart_id: [id],
					selected: status
				}).then((res) => {
					this.getCartList()
				})
			},
			//管理状态下单选商品
			async adminGoodsStatus() {
				console.log(this.cartLists)
				await this.$nextTick()
				const temp = this.cartLists.filter((item) => {
					return item.adminCheck == true
				})
				if (temp.length == this.cartLists.length) {
					this.adminCheckAll = true
				} else {
					this.adminCheckAll = false
				}
			},
			// 全选商品
			changeAllSelect() {
				this.isChangeLoading = true
				const status = this.isSelectedAll == true ? 0 : 1
				const cartIDs = this.goodsListActive.map((item) => item.id)
				apiCartSelectChange({
					cart_id: cartIDs,
					selected: status
				}).then((res) => {
					this.getCartList()
				})
			},
			//管理商品状态下全选商品
			adminAllSelect() {
				this.cartLists.forEach((i) => {
					i.adminCheck = !this.adminCheckAll
				})
			},

			// 去购物
			goShoping() {
				this.$Router.replaceAll('/pages/index/index')
			},

			// 去结算
			goToConfirm() {
				const carts = this.cartLists.filter((item) => item.selected).map((item) => item.id)
				if (carts.length == 0) return this.$toast({
					title: '请选择商品'
				})
				this.$Router.push({
					path: '/pages/goods_order/goods_order',
					query: {
						is_cross: this.cartLists[0].goods.is_cross,
						from: OrderTypeEnum['GOODS'],
						payload: {
							source: 'cart',
							cart_id: carts
						}
					}
				})
			},

			// 去首页
			changeTab() {
				this.$Router.replaceAll({
					path: '/pages/index/index'
				})
			},

			getPage() {
				apiGetPage({
					type: 4
				}).then((res) => {
					const {
						common: {
							title
						},
						common,
						content
					} = res
					uni.setNavigationBarTitle({
						title
					})
					this.pagesData = content
				})
			},
			//滑动卡片关闭其他卡片（排他）--有效商品
			handleactionOpen(index) {
				this.activeIndex = this.activeLists[index].id
			},
			//滑动卡片关闭其他卡片（排他）--无效商品
			handledisaactionOpen(index) {
				this.activeIndex = this.inactiveLists[index].id
			},
			//滑动卡片删除按钮处理 --有效商品
			handleactionClick(index) {
				this.changeDelPopup(this.activeLists[index].id)
			},
			//滑动卡片删除按钮处理 --无效商品
			handledisactionClick(index) {
				this.changeDelPopup(this.inactiveLists[index].id)
			},
			//清空失效商品
			async handleClearAll() {
				this.isChangeLoading = true
				const cart_ids = this.inactiveLists.map((item) => {
					return item.id
				})

				await apiclearAll({
					cart_ids
				})
				this.getCartList()
			},
			//管理商品状态下删除
			async handleAdminDel() {
				this.isChangeLoading = true
				console.log(this.cartLists)
				const temp = this.cartLists.filter((item) => {
					return item.adminCheck == true
				})
				const cart_ids = temp.map((i) => {
					return i.id
				})
				if (cart_ids.length == 0) {
					return (this.isChangeLoading = false)
				}
				await apiclearAll({
					cart_ids
				})
				this.getCartList()
			}
		},
		computed: {
			cartNum() {
				return this.$store.state.cart.cartNum
			},
			getResultBtn() {
				const carts = this.cartLists.filter((item) => item.selected).map((item) => item.id)
				if (carts.length == 0) {
					this.isSelectedAll = false
					return false
				} else {
					return true
				}
			},

			// 可售卖商品列表
			goodsListActive() {
				return (
					this.cartLists.filter(
						(item) =>
						item.cart_status == 0 && item.sku_is_delete == 0 && item.sku_stock_none == 0
					) || []
				)
			},

			// 是否可全选操作
			selectAllDisabled() {
				return !!!this.goodsListActive.length
			}
		},
		watch: {
			cartLists() {
				//添加admincheck响应式属性，用于管理状态下删除商品
				this.cartLists.forEach((item) => {
					this.$set(item, 'adminCheck', false)
				})
				//过滤有效商品
				this.activeLists = this.cartLists.filter((i) => {
					return !(i.cart_status == 1 || (i.goods.spec_type == 1 && i.goods_item.stock == 0))
				})
				//过滤无效商品 单规格库存不足或者商品下架 多规格商品下架
				this.inactiveLists = this.cartLists.filter((i) => {
					return i.cart_status == 1 || (i.goods.spec_type == 1 && i.goods_item.stock == 0)
				})
			}
		},
		async onShow() {
			// this.getCartNum()
			console.log("是否登录" + this.isLogin);
			await this.getCartList();
			if (this.isLogin) {
				this.getPage()
			}
		},

		created() {
			this.countChange = trottle(this.countChange, 200)
		}
	}
</script>
<style lang="scss">
	.normal,
	.heji {
		font-family: 'ar';
	}

	.goodsBox {
		width: 700rpx;
		height: 230rpx;
		box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
		margin-bottom: 20rpx;
		margin-left: 5rpx;
		border-radius: 20rpx;
	}

	.goodsName {
		font-size: 30rpx;
		font-family: 'am';
	}

	.noGoods {
		color: #8e8e8e;
		font-size: 26rpx;
		text-align: center;
		margin-top: 40rpx;
		font-family: 'ar';
	}

	.img-null {
		width: 97rpx;
		height: 73rpx;
		margin-top: 200rpx;
	}

	.logo {
		width: 320rpx;
		height: 52rpx;
		margin-left: 20rpx;
	}

	.shop-cart {
		position: relative;

		.loading {
			position: fixed;
			left: 39vw;
			top: 35vh;
			height: 170rpx;
			width: 170rpx;
			border-radius: 20rpx;
			background: rgba(0, 0, 0, 0.5);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
	}

	.main {
		padding-bottom: 100rpx;

		.cart-header {
			padding: 25rpx 20rpx;
			display: flex;
			justify-content: space-between;
		}

		.goods-container {
			margin: 0 20rpx;
			border-radius: 10rpx;
		}

		.disable-header {
			padding: 25rpx 20rpx;
			margin-top: 30rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;
			display: flex;
			justify-content: space-between;
			background-color: white;
		}

		.disable-body {
			height: 160rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
	}

	.cart-list {
		.cart-item {
			margin: 20rpx 20rpx 0;

			&.invalid {
				opacity: 0.7;
				// background-color: #999;
				// @include background_color();
			}
		}

		.select {
			height: 80rpx;
			// padding: 20rpx;
			// @include border_color();
			// border-style: solid;
		}
	}

	.cart-null {
		text-align: center;

		.btn {
			width: 410rpx;
			height: 90rpx;
			line-height: 90rpx;
			margin-top: 100rpx;
			margin-left: 170rpx;
			border-radius: 40rpx;
			background-color: #f08229;
			color: #fff;
			font-size: 30rpx;
			text-align: center;
			font-family: 'am';
		}
	}

	.footer {
		left: 0;
		// margin-bottom: 100rpx;
		bottom: 0;
		width: 100%;
		z-index: 20;
		height: 100rpx;
		position: fixed;
		padding: 0 24rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);

		.all-price {
			text-align: right;
			flex: 1;
			justify-content: flex-end;
		}

		.right-btn {
			padding: 13rpx 45rpx;
			@include background_color();
		}
	}

	.login {
		// height:calc(100vh - var(--window-bottom));
		background: #fff;
		text-align: center;

		.btn {
			width: 410rpx;
			height: 90rpx;
			line-height: 90rpx;
			margin-top: 100rpx;
			margin-left: 170rpx;
			border-radius: 40rpx;
			background-color: #f08229;
			color: #fff;
			font-size: 30rpx;
			text-align: center;
			font-family: 'am';

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}
	}

	.disable-tip {
		position: relative;

		.disable-text {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			text-align: center;
			color: white;
			background: rgba(0, 0, 0, 0.5);
		}
	}

	.change-sku {
		@include font_color();
		@include border_color();
		width: 112rpx;
		height: 52rpx;
		border-radius: 26rpx;
		border: 1px solid;
		text-align: center;
		line-height: 52rpx;
	}

	page {
		background-color: #fff;
	}
</style>